<template>
  <!-- <div class="about">
   <lifeCycle v-if="isShow"/> <br>
    <button @click="isShow = !isShow">切换</button>
  </div> -->
  <!-- {{ msg }} -->
  <!-- <directiveComponent /> -->
  <!-- <Filter /> -->
  <!-- <p>父组件当前的值是：{{  number}}</p>
  <sonComponent @updateCount="updateEmitCount"/> -->
  <!-- <button @click="showComponetnt=componentLeft">左边</button>
  <button @click="showComponetnt=componenright">右边</button>
  <div>
    <KeepAlive :include="['componentLeft','componenright']">
      <component :is="showComponetnt"></component>
    </KeepAlive>
  </div> -->
  <!-- <slotComponent> -->
    <!-- v-slot的简写  # -->
    <!-- <template #header> -->
      <!-- <p>
        这里是头部
      </p>
    </template>
    <template #default>
      <p>
        这里是身体
      </p>
    </template>
    <template v-slot:footer>
      <p>
        这里是脚
      </p>
    </template>
  </slotComponent> -->
  <!-- <hr>
  <slotComponent >
    <template v-slot="{age,message,url}">
<p>{{ message }} --{{ age}}-{{ url}}</p>
    </template>
  </slotComponent> -->
<transitionComponent/>
<transitionComponentAll/>
<myAnimate/>
</template>

<script setup>
//#region
// import lifeCycle from '../components/lifeCycle.vue';
// import Filter from '../components/Filter.vue';
// import sonComponent from '../components/sonComponent.vue';
// import componentLeft from '../components/componentLeft.vue';
// import componenright from '../components/componenright.vue';
// import slotComponent from '../components/slotComponent.vue';
// import directiveComponent from '../components/directiveComponent.vue';
//#endregion
// import transitionComponent from '../components/transitionComponent.vue';
import transitionComponentAll from '../components/transitionComponentAll.vue';
import myAnimate from '../components/myAnimate.vue';


import { ref,shallowRef } from 'vue';
// let isShow =ref(true)
// const number= ref(10);
// const updateEmitCount =(value,val2) => {
//   console.log(value,val2);
//   number.value+=value
// }
// const showComponetnt=shallowRef(componentLeft)
// const msg = ref('父组件的内容')
</script>
<style scoped>

</style>
